<template>
  <div class="app-container">
    <vxe-form
      :data="formData"
      @submit="onSearchBtnClick"
      @reset="onSearchBtnClick"
    >
      <vxe-form-item
        field="userName"
        :item-render="{
          name: 'input',
          attrs: { placeholder: '请输入用户名称' },
        }"
      />
      <vxe-form-item
        :item-render="{
          name: '$buttons',
          children: [
            {
              props: {
                type: 'submit',
                content: 'common.select',
                status: 'primary',
              },
            },
            {
              props: { type: 'reset', content: 'common.reset' },
            },
          ],
        }"
      />
    </vxe-form>
    <vxe-toolbar custom>
      <template v-slot:buttons>
        <el-tooltip content="驱逐" placement="bottom" effect="light">
          <vxe-button
            v-auth="['admin', 'online:expel']"
            size="medium"
            icon="el-icon-delete"
            status="danger"
            :disabled="!multipleSelection.length"
            @click="onExpelBtnClick"
            >删除</vxe-button
          >
        </el-tooltip>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="table"
      border
      size="mini"
      :loading="loading"
      :data="tableData"
      resizable
      @checkbox-all="selectAllEvent"
      @checkbox-change="selectChangeEvent"
      align="left"
      show-overflow
      show-header-overflow
    >
      <vxe-table-column type="checkbox" width="50" align="center" />
      <vxe-table-column field="userName" title="用户名" width="150" />
      <vxe-table-column field="nickName" title="昵称" width="150" />
      <vxe-table-column field="deptName" title="部门" width="150" />
      <vxe-table-column
        field="loginTime"
        title="登录时间"
        :formatter="formatTime"
        width="150"
      />
    </vxe-table>
    <vxe-pager
      :current-page.sync="formData.currentPage"
      :page-size.sync="formData.pageSize"
      :total="total"
      :page-sizes="[10, 20, 100, 200]"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total',
      ]"
      @page-change="handlePageChange"
    />
  </div>
</template>
<script>
import { online, expel } from '@/api/online'
export default {
  data() {
    return {
      loading: false,
      formData: {
        currentPage: 1,
        pageSize: 20
      },
      tableData: [],
      tableDetailData: [],
      multipleSelection: [],
      multipleDetailSelection: [],
      detail: null,
      details: null,
      total: 0,
      data: []
    }
  },
  created() {
    this.onSearchBtnClick()
  },
  methods: {
    selectAllEvent({ checked, records }) {
      this.multipleSelection = records
    },
    selectChangeEvent({ checked, records }) {
      this.multipleSelection = records
    },
    onSearchBtnClick() {
      this.loading = true
      online(this.formData).then((data) => {
        this.tableData = data.list
        this.total = data.total
        this.loading = false
      })
    },
    formatTime({ cellValue, row, column }) {
      return this.$utils.toDateString(cellValue, 'yyyy-MM-dd HH:ss:mm')
    },
    onExpelBtnClick() {
      this.$confirm('确定驱逐该用户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => this.expelData())
    },
    handlePageChange({ currentPage, pageSize }) {
      this.formData.currentPage = currentPage
      this.formData.pageSize = pageSize
      this.onSearchBtnClick()
    },
    async expelData() {
      const selectRecords = this.$refs.table.getCheckboxRecords()
      await expel(selectRecords.map((item) => item.id))
      this.$notify({
        type: 'success',
        message: '驱逐成功!'
      })
      this.onSearchBtnClick()
    }
  }
}
</script>
